<template>
  <div class="doctorInfo">
    <navtab :title="title" />
    <div class="header">
      <div class="information" v-for="item in doctorList" :key="item.Did">
        <div class="info">
          <dl>
            <dt>
              <img v-lazy="item.pic" />
            </dt>
            <dd>
              <span class="name">{{ item.Dname }}</span>
              <span class="Dpro">{{ item.Dpro }}</span>
            </dd>
            <dd>
              <span class="hospital">{{ item.hospital }}</span>
            </dd>
            <dd>
              <span class="Doffice">{{ item.Doffice }}</span>
            </dd>
          </dl>
        </div>

        <div class="jianjie">
          <h2>个人简介</h2>
          <div
            class="detail"
            :class="openFlag ? 'showjieshao' : ''"
            :style="openFlag ? oldheight : height"
          >
            {{ item.Ddetail }}
          </div>
        </div>

        <div class="open">
          <van-button type="primary" @click="openAll">{{
            openFlag ? '展开全部' : '收起'
          }}</van-button>
        </div>
      </div>
    </div>
    <div class="select">
      <van-button type="primary">选择医生</van-button>
    </div>
  </div>
</template>
<script>
import navtab from '@/components/Navtab'
export default {
  props: ['id'],
  components: {
    navtab
  },
  data: () => ({
    title: '',
    doctorList: [],
    openFlag: true,
    height: {
      height: '240px'
    },
    oldheight: {
      height: '76px'
    }
  }),
  methods: {
    // ...mapActions(['getDotsById']),
    // async getDotsById(id) {
    //   const res = await this.$http.getDotsById(id)
    //   this.doctorList = res.data
    //   console.log(this.doctorList)
    // },
    openAll () {
      this.openFlag = !this.openFlag
    }
  },
  created () {
    this.title = this.$route.meta.title
    // this.getDotsById({ id: this.id })
    this.$store.dispatch({
      type: 'getDotsById',
      val: this.id
    })
  }
}
</script>
<style lang="scss" scoped>
.doctorInfo {
  width: 100%;
  height: 100%;
  background: linear-gradient(#76deca 30%, #efeff4 70%);
  position: relative;
  .information {
    box-shadow: -2px -2px 3px #888888;
    width: 80%;
    border-radius: 6px;
    margin: 18px auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    .info {
      border-bottom: 1px solid #eee;
      height: 40%;
      dl {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        dt {
          width: 30px;
          height: 30px;
          position: relative;
          img {
            position: absolute;
            width: 100%;
            top: -15px;
            height: 100%;
            border-radius: 50%;
          }
        }
        dd {
          margin-bottom: 5px;
          .name {
            font-size: 7px;
            font-weight: 700;
            margin-right: 3px;
          }
          .Dpro {
            color: #b7b7b7;
          }
          .hospital {
            font-size: 6px;
          }
          .Doffice {
            color: #b7b7b7;
          }
        }
      }
    }
    .jianjie {
      padding-top: 8px;
      box-sizing: border-box;
      h2 {
        padding-bottom: 2px;
        padding: 0 4px;
        box-sizing: border-box;
      }
      .showjieshao {
        -webkit-line-clamp: 4;
      }
      .detail {
        font-size: 6px;
        color: #bebec1;
        padding: 0 4px;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition-property: height;
        transition-duration: 300ms;
        transition-timing-function: linear;
      }
    }
    .open {
      border-top: 0.5px solid #eee;
      height: 15px;
      margin-top: 3px;
      button {
        width: 100%;
        height: 100%;
        border-radius: 0 0 4px 4px;
      }
    }
  }
  .select {
    width: 80%;
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    button {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
